<template>
  <el-container class="height100  bigBgColor">
    <el-container direction="vertical" 
    v-loading="loading"
    :element-loading-text="$t('msg_syn')"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)" class="dingdingCon">
      <div class="width100 height100 overflowy">
        <div class="partContent">
          <div class="part padding0">
            <header_item  :headerArr="headerArr"  @onBtnClick="onBtnClick"/>
        <div class="partForm">
          <el-form :inline="true" class="demo-form-inline wexinForm rowItem">
          <el-form-item :label="$t('feishuEnableFly')" >
            <el-radio-group v-model="FeiShuConfigs.feishuProxyType" @change="changeShow">
              <el-radio label="none">{{$t('feishuNotEnableFly')}}</el-radio>
              <el-radio label="EnterpriseFeishu">{{$t('feishuManualConfig')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <el-form
          :model="FeiShuConfigs"
          ref="FeiShuConfigs"
          label-position="top"
          label-width="180px"
          size="mini"
          :rules="rules"
          v-show="FeiShuConfigs.feishuProxyType=='EnterpriseFeishu'"
        >
          <el-row >
            <el-col :span="8">
              <el-form-item :label="$t('feishuCorpid')" prop="feishuCorpID"   >
                <el-input v-model="FeiShuConfigs.feishuCorpID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" >
              <el-form-item :label="$t('feishuAppId')" prop="feishuAppId"   >
                <el-input v-model="FeiShuConfigs.feishuAppId" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" >
              <el-form-item :label="$t('feishuAppSecret')" prop="feishuAppSecret" class="verifyItem">
                <el-input v-model="FeiShuConfigs.feishuAppSecret">
                  <template slot="append">
                    <el-button plain type="primary" @click="onVerifyBtnClick">{{$t('verify_link')}}</el-button>
                 </template>
                </el-input>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>
             <el-col :span="8" >
              <el-form-item :label="$t('feishuRedirectAddress')" prop="feishuServerHost"   >
                <el-input v-model="FeiShuConfigs.feishuServerHost"  placeholder="http://www.xxx.com"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </div>
        </div>
        <div class="part"  v-show="FeiShuConfigs.feishuProxyType=='EnterpriseFeishu'">
        <p class="smallHeader">{{$t('enabled_software')}}</p>

        <el-table
          :data="FeiShuConfigs.apps"
          class="el-table-w marginT24"
          header-cell-class-name="tableHeaderbg"
          size="small"
        >
          <el-table-column prop="name" :label="$t('software_name')" width="180"></el-table-column>
          <el-table-column prop="description" :label="$t('description')" width="180"></el-table-column>
          <el-table-column :label="$t('feishuAppId')+'*'">
             <template slot-scope="scope">
              <i class="iconfont icon-Frame" @click="editAppKey(scope.row)"></i>
              <span>{{scope.row.feishuAppKey}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('feishuAppSecret')+'*'">
             <template slot-scope="scope">
              <i class="iconfont icon-Frame" @click="editAppSecret(scope.row)"></i>
              <span>{{scope.row.feishuAppSecret}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('feishuJumpLink')+'*'">
             <template slot-scope="scope">
              <el-button @click="genFeishuURL(scope.row)" type="primary" plain size="small">{{$t('jumplink')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
      </div>
    </el-container>
     <ding_result :visible.sync="FeishuResultVisible" :DingResult="FeishuResult" />
     <dingUrl :visible.sync="feishuUrlVisible" v-if="feishuUrlVisible" :dingUrlResult="feishuUrlResult"  :dingUrlTitle="$t('feishuConfig')"/>
  </el-container>
</template>

<script>
import ding_result from "@/components/ding_result.vue";
import dingUrl from "@/components/dingUrl.vue";
export default {
  components:{
    ding_result,
    dingUrl,
  },
  created() {
    //   //请求接口返回数据
    this.$api.getFeiShuConfig(
      { domainid: this.$route.query.domainid},
      {
        onSucess: resp => {
          
          this.FeiShuConfigs = resp.data.data;
          this.changeShow()
        }
      }
    );
    //关于标题的处理
    this.headerArr={iconfont:'icon-icon_fspz_off',content:this.$t('feishu'),listHeaderClass:'noListHeader', btnArr:[{type:'primary',name:'save',label:this.$t('save')}] }
  },
  data() {
    return {
      scrollHeight: null,
      FeiShuConfigs: {},
      loading:false,
      rules:{
        feishuCorpID:[
          {required: true, message: this.$t('feishuPleaseCorpid'), trigger: 'blur'}
        ],
        feishuAppId:[
          {required: true, message: this.$t('feishuPleaseAppid'), trigger: 'blur'}
        ],
        feishuAppSecret:[
          {required: true, message: this.$t('feishuPleaseAppsecret'), trigger: 'blur'}
        ],
        
      },
      feishuUrlVisible:false,
      feishuUrlResult:null,
      FeishuResultVisible:false,
      FeishuResult:{},
      headerArr:{}
    };
  },
  methods: {
    onBtnClick(name){
      if(name=='save'){this.onSaveBtnClick('FeiShuConfigs')}
      else if(name=='feishuSynchDomain'){this.onSync2FeiShu()}
      else if(name=='feishuSynchEnterprise'){this.onSynFromFeiShu()}
    },
    changeShow(){
      let temp=[],tempArr=[]
      if(this.FeiShuConfigs.feishuProxyType=='EnterpriseFeishu'){
        tempArr=[{name:"feishuSynchDomain",label:this.$t('feishuSynchDomain')},{name:"feishuSynchEnterprise",label:this.$t('feishuSynchEnterprise')}]
         temp=[...this.headerArr.btnArr,...tempArr]
      }else{
         temp=[this.headerArr.btnArr.shift()]
      }
      this.$set(this.headerArr,"btnArr",temp)
    },
    //保存按钮
    onSaveBtnClick(formName) {
      for(let k in this.FeiShuConfigs){
        if(typeof this.FeiShuConfigs[k]=="string")
        this.FeiShuConfigs[k]=this.FeiShuConfigs[k].replace(/^\s*/,"")
      }
      this.$refs[formName].validate((valid) => {
        if (valid||this.FeiShuConfigs.feishuProxyType=='none') {
          this.$api.updateFeiShuConfig(
            { domainid: this.$route.query.domainid, data: this.FeiShuConfigs },
            {
              onSucess: resp => {
                if (resp.data.errcode == 0) {
                  this.$message({
                    showClose: true,
                    message: this.$t('msg_save_success'),
                    type: "success"
                  });
                } else {
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "error"
                  });
                }
              }
            }
          );
        } else {
          return false;
        }
      });  
    },
   
    //验证连接
    onVerifyBtnClick() {
      if(this.FeiShuConfigs.feishuAppId == "" || this.FeiShuConfigs.feishuAppSecret == ""){
        this.$message({
          showClose: true,
          message: this.$t('msg_timeout'),
          type: "error"
        });
        return false;
      }
      this.$api.verifyFeiShuConfig(
        {
          domainid: this.$route.query.domainid,
          appkey: this.FeiShuConfigs.feishuAppId,
          appsecret: this.FeiShuConfigs.feishuAppSecret,
        },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.$message({
                showClose: true,
                message: this.$t('msg_verified_success'),
                type: "success"
              });
            } else {
              this.$message({
                showClose: true,
                message: this.$t('msg_verified_failed'),
                type: "error"
              });
            }
          }
        }
      );
    },
    //同步钉钉到域(租户)
    onSynFromFeiShu(){
      this.loading=true;
      this.$api.synFromFeiShu(
        {
          domainid: this.$route.query.domainid,
        },
        {
          onSucess: resp => {
            
            if (resp.data.errcode == 0) {
              this.FeishuResult={}
              this.FeishuResult=resp.data.data;
              this.loading=false;
              this.FeishuResultVisible=true;
            } 
          },
          onError:(resp) => {
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        }
      );
    },
    //同步域(租户)到飞书
    onSync2FeiShu(){
      this.loading=true;
      this.$api.sync2FeiShu(
        {
          domainid: this.$route.query.domainid,
        },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.FeishuResult={}
              this.FeishuResult=resp.data.data;
              this.loading=false;
              this.FeishuResultVisible=true;
            } 
            
          },
          onError:(resp) => {
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        }
      );
    },
      //编辑单个的飞书应用feishuAppKey
    editAppKey(row){
      this.$prompt(this.$t('enter_feishu_appid'), '', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
      }).then(({ value }) => {
        row.feishuAppKey=value;
        this.onSaveFeishuAppKey(row,value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('msg_cancel')
        });       
      });
    },
   editAppSecret(row){
      this.$prompt(this.$t('enter_feishu_appsecret'), '', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
      }).then(({ value }) => {
        row.feishuAppSecret=value;
         this.onSaveFeishuAppSecret(row,value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('msg_cancel')
        });       
      });
    },
    //保存单个的飞书应用FeishuAppKey
    onSaveFeishuAppKey(row){
      this.$api.saveFeishuAppKey(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
          id:row.feishuAppKey,
        },
        {
          onSucess: () => {
                this.$message({
                showClose: true,
                message: this.$t('msg_save_success'),
                type: "success"
              });
          }
        }
      );
    },
    //保存单个的飞书应用FeishuSecret
    onSaveFeishuAppSecret(row){
      this.$api.saveFeishuAppSecret(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
          secret:row.feishuAppSecret,
        },
        {
          onSucess: () => {
               this.$message({
                showClose: true,
                message: this.$t('msg_save_success'),
                type: "success"
              });
          }
        }
      );
    },
      //生成跳转链接
    genFeishuURL(row) {
      if(row.feishuAppKey==""||row.feishuAppKey==null){
        this.$message({
          showClose: true,
          message: this.$t('enter_feishu_appid'),
          type: "error"
        });
        return false;
      }
      this.$api.genFeishuURL(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
          appid:row.feishuAppKey
        },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.feishuUrlResult=resp.data.data;
              this.feishuUrlVisible=true;
            } else {
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
          }
        }
      );
    },
    
  },
  mounted(){
    this.scrollHeight=(document.documentElement.clientHeight || document.body.clientHeight) - 90
  },
};
</script>

<style>
</style>